<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品管理后台系统</title>
    <script src="../js/axios.min.js"></script>

</head>

<body>
    <h1>商品管理后台系统</h1>
    <div>
        <p>商品名称：<input type="text" class="pname-ipt" /></p>
        <p>商品价格：<input type="text" class="pprice-ipt" /></p>
        <p>图片路径：<input type="text" class="pimg-ipt" /></p>
        <p>商品描述：<textarea name="" id="" cols="30" rows="10" class="pdesc-ipt"></textarea></p>

        <button class="publish-btn">发布商品</button>
    </div>

    <ul id="plist"></ul>
    <script>
        function loadProductList() {
            let prodcutListAPI =
                "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            let pagesize = 20;
            let pagenum = 0; //商品列表 从0页开始
            let uid = localStorage.getItem("id");
            let params = {
                pagesize: pagesize,
                pagenum: pagenum,
                uid
            };
            axios.get(prodcutListAPI, {
                params: params
            }).then((res) => {
                console.log(res.data);
                // 商品数据 数组
                let productArr = res.data.data;
                let html = "";
                productArr.forEach((pObj) => {
                    html += `
                <li>
                  <p>${pObj.pname}</p>
                  <p>${pObj.pprice}</p>
                  <img src="${pObj.pimg}" alt="">
                  <p>${pObj.pdesc}</p>

                  <p>商品id：${pObj.pid}</p>
                  <p>用户id:${pObj.uid}</p>

                  <button onclick="delBtnClick(${pObj.pid})">删除</button>
                  <a href="update.html?id=${pObj.pid}">修改</a>
                </li>  `;
                });
                document.querySelector("#plist").innerHTML = html;
            });
        }

        // 发布功能
        function publishFn() {
            let publishBtn = document.querySelector(".publish-btn");
            let pnameIpt = document.querySelector(".pname-ipt");
            let ppriceIpt = document.querySelector(".pprice-ipt");
            let pimgIpt = document.querySelector(".pimg-ipt");
            let pdescIpt = document.querySelector(".pdesc-ipt");
            publishBtn.onclick = function() {
                let pname = pnameIpt.value;
                let pprice = ppriceIpt.value;
                let pimg = pimgIpt.value;
                let pdesc = pdescIpt.value;
                let publishProductAPI =
                    "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
                let uid = localStorage.getItem("id");
                let params = {
                    pname: pname,
                    pprice: pprice,
                    pimg,
                    pdesc,
                    uid
                };
                console.log(params);
                axios.get(publishProductAPI, {
                    params: params
                }).then((res) => {
                    console.log(res.data); // 服务器返回的数据
                    alert("发布商品成功");
                    //刷新商品列表
                    loadProductList();
                });
            };
        }

        // 删除功能
        function delBtnClick(pid) {
            let uid = localStorage.getItem("id");
            let token = localStorage.getItem("token");
            console.log(pid);
            let delProductAPI =
                "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
            let params = {
                uid,
                token,
                pid
            };
            console.log(params);
            // 调用接口 -- 刷新列表
            axios.get(delProductAPI, {
                params
            }).then((res) => {
                console.log(res.data);
                loadProductList();
            });
        }

        loadProductList();
        publishFn();
    </script>
</body>

</html>